/**
 * @description 秒杀
 */
import style from './styles/App.less';
import classnames from "classnames";
import React from 'react';
import EntryBase from "../Common/EntryBase";
const Fragment = React.Fragment;
import SeckillGoodsItem from 'components/SeckillGoodsItem';
import ScrollReachEndContainer from "components/ScrollReachEndContainer";
import TabBar from "components/TabBar";

import { seckillList, list as goodsListForType, seckillActivityTime } from "api_liuhaojie/app/goods";
import { spike_banners } from "api_xukaiyu/app/content";

import util from "commons/util";
let query = util.parseQueryString();
import wxShare from "commons/wxShare";

class App extends EntryBase {
    constructor(props) {
        super(props);
        this.state = {
            seckillListPage: 1,
            seckillList: [],
            bannerList: [],
            times: null
        }
    }
    componentDidMount() {
        super.componentDidMount();
        //设置分享
        let shareData = {};
        shareData.title = `每天10点来秒杀，轻轻松松省百元`;
        shareData.imgUrl = `https://oss.weidai.com.cn/pz2HrDRkZc.png`;
        shareData.desc = `它它它它它又降价了，还不快来看看`;
        wxShare(shareData);

        this.getSeckillList();
        // 查询秒杀banner列表
        spike_banners().then(res => {
            this.setState({
                bannerList: res.data
            }, () => {
                new Swiper(`.${style.banner}`, {
                    loop: true,
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    autoplay: true
                });
            })
        })

        // 秒杀倒计时
        seckillActivityTime().then(res => {
            if (res.data && res.data.now && res.data.endTime) {
                if (!!res.data.saleStatus) {
                    this.runTime(res.data.now, res.data.endTime);
                }
                this.setState({
                    timesRuning: !!res.data.saleStatus
                })
            }
        })
    }
    render() {
        return (
            <Fragment>
                <ScrollReachEndContainer className={classnames(style.main, "x-scroll-y")} loadText={this.state.scrollLoadText} onReachEnd={() => {
                    this.reachEnd();
                }}>
                    <div className={style.kv}>
                        {
                            !this.state.timesRuning && <div className={style.waitTimes}>
                                每日10:00开抢
                        </div>
                        }
                        {
                            !!this.state.times && !!this.state.timesRuning && <div className={style.times}>
                                距秒杀结束: <span>{this.state.times[0]}</span> : <span>{this.state.times[1]}</span> : <span>{this.state.times[2]}</span>
                            </div>
                        }
                    </div>
                    <div className={style.goodsList}>
                        {
                            this.state.seckillList.map((item, index) => {
                                return (
                                    <SeckillGoodsItem key={item.id} data={item} />
                                )
                            })
                        }
                    </div>
                </ScrollReachEndContainer>
                <TabBar />
            </Fragment>
        )
    }

    // 倒计时
    runTime(startTime, endTime) {
        let timediff = util.Sub(endTime, startTime); // 毫秒数差
        let secdiff = parseInt(util.Div(timediff, 1000)); // 秒数差
        let secText = secdiff % 60; // 秒余数，就是秒位的数字
        let leftSec = secdiff - secText;// 剩余秒数
        let minText = leftSec >= 60 ? ((leftSec / 60) % 60) : 0; // 分余数，就是分位的数字
        let leftMin = leftSec >= 60 ? (leftSec / 60) - minText : 0;// 剩余分数
        let hourText = leftMin > 0 ? util.Div(leftMin, 60) : 0; // 时位数
        if (secText <= 9) {
            secText = "0" + secText;
        }
        if (minText <= 9) {
            minText = "0" + minText;
        }
        if (hourText <= 9) {
            hourText = "0" + hourText;
        }

        this.setState({
            times: [hourText, minText, secText]
        }, () => {
            if (secText <= 0 && minText <= 0 && hourText <= 0) {
                clearTimeout(this.timeout);
                this.setState({
                    timesRuning: false
                })
            } else {
                this.timeout = setTimeout(() => {
                    this.runTime(startTime + 1000, endTime)
                }, 1000)
            }
        })
    }

    // 查询秒杀列表
    getSeckillList() {
        seckillList({
            page: this.state.seckillListPage
        }).then((res) => {
            const newSeckillList = [...this.state.seckillList, ...res.data];
            this.setState({
                seckillListPage: res.data.length < 1 ? this.state.seckillListPage : this.state.seckillListPage + 1,
                seckillList: newSeckillList,
                scrollLoadText: res.data.length < 10 ? "没有更多商品" : "正在加载更多商品..."
            })
            this.loading = false;
        })
    }

    // 触底
    reachEnd() {
        if (!this.loading) {
            this.setState({
                scrollLoadText: "正在加载更多商品..."
            })
            this.loading = true;
            this.getSeckillList();
        }
    }
}

export default App;